<template>
	<view class="out">
		<carList :cart="cart" :isSelectedAll="true" :shownullcart="false"></carList>
		<view class="content" v-if="false">
			<view class="mid">
				<image src="/static/icon-index-empty.png" mode="" class="empty"></image>
				<view class="desc">
					点击去登陆查看购物车商品
				</view>
				<button type="warn" size="mini" class="goLog">去登陆</button>
			</view>
		</view>
		<view class="">
		</view>
		<view class="total">
			<view class="total-left">
				<image src="../../static/checkbox-checked.png" mode=""></image>
				<text>全选</text>
			</view>
			<view style="display: flex;justify-content: center;align-items: center;">
				<div style="display: flex;flex-direction: column;">
				<text style="margin-right: 10rpx;color: #333;">合计：￥55.2</text>
				<text style="margin-right: 10rpx;color: #333;">不含运费,已优惠￥0.00</text>
				</div>
				<text class="submit" @click="confirm">去结算(2件)</text>
			</view>
		</view>
	</view>
</template>

<script>
	import carList from '../../components/shopping-carts/shopping-cart.vue'
	export default {
		data() {
			return {
				num: 1,
				select:false,
				cart:[
					{
						id: 0,
						groupkey:"",
						items:[{
							id: -1,
							name:'欧莱雅面霜',
							logoImg: '../../static/part-00354-1289.jpg',
							attributes:'规格 50g',
							price:"55.2",
							quantity:"11",
						},
						{
							id:0,
							name:'欧莱雅面霜',
							logoImg: '../../static/part-00354-1289.jpg',
							attributes:'规格 50g',
							price:"55.2",
							quantity:"11",
						},
						{
							id:"99",
							name:'欧莱雅面霜',
							logoImg: '../../static/part-00354-1289.jpg',
							attributes:'规格 50g',
							price:"55.2",
							quantity:"11",
						}]
					},
				]
			};
		},
		components: {
			carList
		},
		methods: {
			// 加
			add() {
				this.num++
			},
			// 减
			reduce() {
				this.num--
			},
			// 结算
			confirm() {
				uni.navigateTo({
					url: '../submit-order/submit-order'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 50px;
		z-index: 99;

		.submit {
			background-color: #ff5344;
			line-height: 100rpx;
			width: 260rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			display: inline-block;
		}

		.total-left {
			image {
				width: 24px;
				height: 24px;
				vertical-align: middle;
				margin: 0 20rpx;
			}

			text {
				vertical-align: middle;
			}
		}
	}

	.vip {
		margin: 20rpx;
		padding: 0 20rpx;
		line-height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #72491d;
		border-radius: 10rpx;
		background: linear-gradient(to right, #e3c28c, #fdd2a7);
	}

	.cart-goods {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 100rpx;

		.right {
			width: 80rpx;
			text-align: right;

			image {
				width: 24px;
				height: 24px;
			}
		}

		.one {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;

			.goods-detail {
				height: 180rpx;
				width: 400rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.change {
					display: flex;
					justify-content: space-between;

					.add {
						display: flex;
						width: 160rpx;
						margin-right: 20rpx;
						justify-content: space-between;

						input {
							width: 50rpx;
						}
					}

					image {
						width: 24px;
						height: 24px;
					}
				}
			}

			.logo {
				width: 180rpx;
				height: 180rpx;
			}
		}
	}

	.content {
		.mid {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;

			.desc {
				margin: 40rpx 0;
			}

			.empty {
				width: 220rpx;
				height: 220rpx;
			}

			.goLog {
				width: 310rpx;
				line-height: 96rpx;
				color: #fff;
				font-size: 18px;
			}
		}
	}
</style>
